<template>
    <el-dialog title="添加车辆" :visible.sync="showDialog_" custom-class='dialog_right' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <el-form :model="addForm.formItem" :rules="addForm.rules" ref="addForm" label-width="80px">
        <input type="text" style="display:none" />
        <el-form-item  label="车牌号" prop='plateNumber'>
          <el-input v-model="addForm.formItem.plateNumber" placeholder='请输入车牌号（必填）'size=""></el-input>
        </el-form-item>
        <el-form-item  label="票数" prop='seatCounts'>
          <el-input v-model="addForm.formItem.seatCounts" placeholder='请输入票数（必填）'size=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer footerStyle">
          <el-button type="primary" class='btn-primary' :disabled = 'isSubmitBtnDisabled' @click='submitForm("addForm")' v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
          <el-button type='primary' class='btn-cancel' :disabled = "isSubmitBtnDisabled"  @click="showDialog_ = false" size=''>取消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import routeService from '../../../services/route'
import { mapState } from 'vuex'
export default {
  name: 'MkAddCar',
  components: {

  },
  props: ['showDialog'],
  computed: mapState({

  }),
  methods: {
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = 'no';
      this.isSubmitBtnDisabled = false;
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          this.isSubmitBtnDisabled = true;
          routeService.addCar(this.addForm.formItem,(data)=>{
            this.$message.success('添加成功');
            this.isRefresh = 'yes';
            this.showDialog_ = false;
            this.fullscreenLoading = false;
          },(data)=>{
            this.fullscreenLoading = false;
            this.isSubmitBtnDisabled = false;
          })
        }
      })
    }
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    var validatePlateNumber = (rule,val,callback) => {
      if(val.trim() == '') {
        callback("请输入车牌号")
      }else{
        if(val.length>10){
          callback('最多输入10位');
        }else{
          callback();
        }
      }
    }
    var validateSeatCounts = (rule,val,callback) => {
      if(val.trim() == '') {
        callback("请输入票数")
      }else{
        let reg = /(^0$|^[1-9]{1}[0-9]{0,2}$)/;
        if(!reg.test(val) || parseInt(val)>100){
          callback('请输入不超过100的数字');
        }else{
          callback();
        }
      }
    }
    return {
      isSubmitBtnDisabled: false,
      fullscreenLoading: false,
      isRefresh: 'no',
      showDialog_: this.showDialog,
      addForm: {
        formItem: {
          plateNumber: '',
          seatCounts: '',
        },
        rules: {
          plateNumber: {validator:validatePlateNumber,trigger: 'change,blur'},
          seatCounts: {validator:validateSeatCounts,trigger: 'change,blur'}
        }
      }

    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
</style>
